<template>
  <view>
    <!-- 竖向排列 row  -->
    <view class="x-goods-list-row" v-if="type === 'row'">
      <view class="left">
        <view v-for="(item, index) in leftList" :key="index">
          <x-goods-home-swiper v-if="item.model === 'swiper'" :detail="item" :sourcePageType="sourcePageType" :sourcePageId="sourcePageId" :source="source" @mounted="pushList" />
          <x-goods-home-recommend v-else-if="item.model === 'recommend'" :detail="item" :sourcePageType="sourcePageType" :sourcePageId="sourcePageId" :source="source" @mounted="pushList" />
          <x-goods-special-item v-else-if="item.model === 'special'" :detail="item" :sourcePageType="sourcePageType" :sourcePageId="sourcePageId" :source="source" @mounted="pushList"/>
          <x-goods-item v-else :detail="item" :showRanking="showRanking" :showSourceFactory="showSourceFactory" :componentId="componentId" :sourcePageType="sourcePageType" :sourcePageId="sourcePageId" :source="source" @mounted="pushList" />
        </view>
      </view>
      <view class="right">
        <view v-for="(item, index) in rightList" :key="index">
          <x-goods-home-swiper v-if="item.model === 'swiper'" :detail="item" :sourcePageType="sourcePageType" :sourcePageId="sourcePageId" :source="source" @mounted="pushList" />
          <x-goods-home-recommend v-else-if="item.model === 'recommend'" :detail="item" :sourcePageType="sourcePageType" :sourcePageId="sourcePageId" :source="source" @mounted="pushList" />
          <x-goods-special-item v-else-if="item.model === 'special'" :detail="item" :sourcePageType="sourcePageType" :sourcePageId="sourcePageId" :source="source" @mounted="pushList"/>
          <x-goods-item v-else :detail="item" :showRanking="showRanking" :showSourceFactory="showSourceFactory" :componentId="componentId" :sourcePageType="sourcePageType" :sourcePageId="sourcePageId" :source="source" @mounted="pushList" />
        </view>
      </view>
    </view>
    <!-- 横向排列 column  -->
    <view class="x-goods-list-column" v-if="type === 'column'">
      <view v-for="item in list" :key="item.productId" class="_column">
        <p-column :detail="item" :source-page-type="sourcePageType" :source-page-id="sourcePageId" :source="source" :line-clamp="lineClamp" />
      </view>
    </view>
  </view>
</template>

<script>
import XGoodsItem from '@/components/x-goods-item';
import XGoodsHomeSwiper from '@/components/x-goods-home-swiper';
import XGoodsHomeRecommend from '@/components/x-goods-home-recommend';
import XGoodsSpecialItem from '@/components/x-goods-special-item';
import PColumn from './column.vue';

export default {
  name: 'XGoodsList',
  components: {
    XGoodsSpecialItem,
    XGoodsItem,
    XGoodsHomeSwiper,
    XGoodsHomeRecommend,
    PColumn
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    componentId: {
      type: [String, Number],
      default: ''
    },
    from: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'row'
    },
    lineClamp: {
      type: Boolean,
      default: false
    },
    showRanking: { // 显示源头工厂
      type: Boolean,
      default: true
    },
    showSourceFactory: { // 显示源头工厂
      type: Boolean,
      default: false
    },
    sourcePageType: { // 埋点用
      type: [String, Object],
      default: '1'
    },
    sourcePageId: { // 埋点用源页面Id
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      leftHeight: 0,
      rightHeight: 0,
      leftList: [],
      rightList: [],
      allList: []
    };
  },
  methods: {
    handleList(list) {
      const len = this.allList.length;
      this.allList.push(...list);
      // if (len === 0) {
        this.pushList();
      // }
    },
    // 下拉刷新
    refresh() {
      this.leftHeight = 0;
      this.rightHeight = 0;
      this.leftList = [];
      this.rightList = [];
    },
    // 页面渲染
    pushList(h, detail) {
      if (h && detail) {
        if (detail.itemType === 'left') {
          this.leftHeight += h;
        } else {
          this.rightHeight += h;
        }
      }
      if (this.allList && this.allList.length) {
        const row = this.allList.shift();
        if (this.leftList.length) {
          if (this.leftHeight > this.rightHeight) {
            this.rightList.push({
              ...row,
              itemType: 'right'
            });
          } else {
            this.leftList.push({
              ...row,
              itemType: 'left'
            });
          }
        } else {
          this.leftList.push({
            ...row,
            itemType: 'left'
          });
        }
      }
    }
  }
};
</script>

<style lang="scss">
.x-goods-list-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .left, .right{
    //width: 50%;
  }
}

// column
.x-goods-list-column {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  ._column{ flex: 1;}
}
</style>
